import React from 'react'
import { RouterRowState, ROUTER_LIST } from './router'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { MainLayout } from '../components'

interface PropsType {
  route: RouterRowState
}
const BeforeEachRouter: React.FC<PropsType> = (props) => {
  const role =localStorage.getItem('role')||''
  if(props.route.roles&&!props.route.roles.includes(role){
    
  })return(<div>没有权限</div>)
  const whileList=['/login']
  const token=localStorage.getItem('token');
  if(token){
    if(whileList.includes(props.route.path)){
      return <Navigate to='/'></Navigate>
    }else{
return props.route.element
    }
  }else{
    if(whileList.includes(props.route.path)){
      return props.route.element
    }else{
    return <Navigate to='/login'></Navigate>
  }
  }
  
}
// 渲染视图
const routerView = (routes: RouterRowState[]) => {
  return routes.map((v, i) => {
    return (
      <Route
        key={i}
        path={v.path}
        element={<BeforeEachRouter route={v}></BeforeEachRouter>}
      ></Route>
    )
  })
}

// 路由组件
const Index: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>{routerView(ROUTER_LIST)}</Routes>
    </BrowserRouter>
  )
}

export default Index
